<template>
	<view class="">
		<!-- 头部导航栏 -->
		<cus-navbar ref="navbar"></cus-navbar>
		<view class="main-padding">
			<view class="custabs flex">
				<view class="custabs-left transition" :class="current==0?'custabs-acv':'custabs-default'"
					@click="tabsClick(0)">{{tabs[0].name}}</view>
				<view class="custabs-right transition" :class="current==1?'custabs-acv':'custabs-default'"
					@click="tabsClick(1)">{{tabs[1].name}}</view>
			</view>

			<template v-if="current==0">
				<view class="home-list-card flex align-center" v-for="(item,index) in list" :key="index">
					<image :src="item.project_logo" mode="aspectFill" class="img-122 flex-shrink"></image>
					<view class="flex-1 ml-20 flex align-center">
						<view class="flex-1">
							<view class="size-28 mb-10">{{item.project_title}}</view>
							<view class="flex mb-20">
								<view class="flex-1">
									<view class="size-24 color-main">{{item.total_income}}</view>
									<!-- 总收益 -->
									<view class="size-20 color-59 mt-5 word-warp">{{$t('index21')}}(USDT)</view>
								</view>
								<!-- 今日收益 -->
								<!-- <view class="flex-1">
									<view class="size-24 color-main">{{item.income}}</view>
									<view class="size-20 color-59 mt-5 word-warp">{{$t('index22')}}(USDT)</view>
								</view> -->
							</view>
							<!-- <progress activeColor="#95FE6F" stroke-width="3" backgroundColor="#506875"
								:percent="getProgress(item)" /> -->
						</view>
						<view class="text-center pl-30">
							<!-- 卖出时间 -->
							<view class="color-59 size-20">{{$t('index23')}}</view>
							<view class="size-20 mt-10 mb-10">{{item.sell_time}}</view>
							<!-- 卖出 -->
							<button class="flex-shrink order-list-btn color-main" @click="submit(item)"
								v-if="item.is_sell==1">{{$t('index24')}}</button>
							<!-- 卖出 -->
							<view class="flex-shrink order-diable-btn text-center color-9" v-else>{{$t('index24')}}
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="home-list-card home-done-card flex align-center" v-for="(item,index) in list" :key="index">
					<image src="../../static/mock/1.png" mode="aspectFill" class="img-122 flex-shrink"></image>
					<view class="flex-1 ml-20 flex align-center">
						<view class="flex-1">
							<view class="size-28 mb-10">{{item.project_title}}</view>
							<view class="flex mb-20">
								<view class="flex-1">
									<view class="size-24">{{item.total_income}}</view>
									<!-- 总收益 -->
									<view class="size-20 color-9 mt-5 word-warp">{{$t('index21')}}(USDT)</view>
								</view>
								<!-- 今日收益 -->
								<!-- <view class="flex-1">
									<view class="size-24">{{item.income}}</view>
									<view class="size-20 color-9 mt-5 word-warp">{{$t('index22')}}(USDT)</view>
								</view> -->
							</view>
							<progress activeColor="#999999" stroke-width="3" percent="100" />
						</view>
						<view class="pl-30">
							<!-- 已卖出 -->
							<view class="flex-shrink order-diable-btn text-center color-9">{{$t('index25')}}</view>
						</view>
					</view>
				</view>
			</template>
			<cus-empty v-show="list.length==0"></cus-empty>
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
		
		<!-- 卖出提示 确认卖出 -->
		<cus-dialog ref="sold" :title="$t('index26')" :btnTxt="$t('index27')" @confrim="confrim">
			<!-- 确认卖出此订单 -->
			<view class="text-center color-81 size-28">{{$t('index28')}}</view>
		</cus-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				list: [],
				page: 1,
				limit: 10,
				loadStatus: 'loading',
				id: null
			}
		},
		computed: {
			tabs() {
				return [{
						name: this.$t('index29'), // 进行中
						value: 1
					},
					{
						name: this.$t('index30'), // 已完成
						value: 2
					}
				]
			}
		},
		onShow() {
			this.page=1
			this.list = []
			this.loadData(true)
		},
		onPullDownRefresh() {
			this.page=1
			this.list = []
			this.loadData(true, true)
		},
		onReachBottom() {
			if(this.loadStatus=='noMore')return
			this.page++
			this.loadData()
		},
		methods: {
			loadData(flag, refresh) {
				if (flag) this.page = 1
				this.loadStatus = 'loading'
				this.$api.post('/data/api.auth.invest/investLog', {
					page: this.page,
					limit: this.limit,
					status: this.tabs[this.current].value
				}).then(res => {
					this.list = this.list.concat(res.list)
					this.loadStatus = res.list.length == this.limit ? 'more' : 'noMore'
					if (refresh) uni.stopPullDownRefresh()
				})
			},
			tabsClick(index) {
				if (this.current == index) return
				this.page=1
				this.list = []
				this.current = index
				this.loadData(true)
			},
			getProgress(data) {
				let num = this.$utils.bcdiv(data.income, data.total_income)
				return num * 100
			},
			submit(data) {
				this.id = data.id
				this.$refs.sold.open()
			},
			confrim() {
				this.$api.post('/data/api.auth.invest/investSell', {
					project_log_id: this.id
				}).then(res => {
					uni.showToast({
						title: this.$t('index31') // 卖出成功
					})
					this.$refs.sold.close()
					this.loadData(true)
				})
			}
		}
	}
</script>

<style lang="scss">
	.custabs {
		width: 590rpx;
		height: 100rpx;
		margin: 30rpx auto;

		.custabs-left {
			flex: 1;
			height: 100rpx;
			border-radius: 50rpx 0 0 50rpx;
			background-color: #14151E;
			line-height: 96rpx;
			text-align: center;
			border-width: 2rpx;
			border-style: solid;
			border-right: none;
		}

		.custabs-default {
			border-color: #0C1216;
			color: #84AAA6;
			font-size: 28rpx;
		}

		.custabs-acv {
			border-color: #00FF9A;
			color: #01FF9A;
			font-size: 32rpx;
		}

		.custabs-right {
			flex: 1;
			height: 100rpx;
			border-radius: 0 50rpx 50rpx 0;
			background-color: #14151E;
			line-height: 96rpx;
			text-align: center;
			border-width: 2rpx;
			border-style: solid;
			border-left: none;
		}
	}
</style>